
import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:yp/helper.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class ResetPasswordPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _ResetPasswordPage();
  }
}

class _ResetPasswordPage extends State<ResetPasswordPage> {
  final ResetPasswordLogic logic = Get.put(ResetPasswordLogic());
  final ResetPasswordState state = Get.find<ResetPasswordLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: setWidth(1),
        backgroundColor: Colors.white,
        title: Text(
          '重置密码',
          style: TextStyle(
            color: Color(0xff222222),
            fontSize: 18,
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff333333), //修改颜色
        ),
      ),
      body: GetBuilder<ResetPasswordLogic>(
        builder: (logic) {
          return Container(
            color: Colors.white,
            width: MediaQuery.of(context).size.width,
            child: ListView(
              padding: EdgeInsets.symmetric(horizontal: setWidth(40)),
              children: [
                SizedBox(
                  height: setWidth(10),
                ),
                TextField(
                  controller: state.phoneTextController,
                  focusNode: state.phoneFocusNode,
                  maxLines: 1,
                  style: TextStyle(
                    color: Color(0xff222222),
                    fontSize: 16,
                  ),
                  keyboardType: TextInputType.phone,
                  onChanged: (text) {
                    logic.whetherAvailableClick();
                  },
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(vertical: setWidth(40)),
                    hintText: '请输入手机号',
                    suffixIcon: Container(
                      width: setWidth(200),
                      alignment: Alignment.centerRight,
                      child: GestureDetector(
                        onTap: () {
                          print('++++++++++++++++++ 获取验证码点击事件 ++++++++++++++++++');
                          if (logic.state.seconds > 0 && logic.state.seconds < 60) {
                            return;
                          }
                          if (!RegexUtil.isMobileSimple(state.phoneTextController.text)) {
                            toast("手机号格式错误");
                            return;
                          }
                          logic.state.seconds = 59;
                          logic.sendSms();
                        },
                        child: Container(
                          width: setWidth(180),
                          height: setWidth(60),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(setWidth(10)),
                            border: Border.all(
                              width: setWidth(1),
                              color: Color(0xffe1e1e1),
                            ),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            state.verifyStr,
                            style: TextStyle(
                              color: Color(0xff717171),
                              fontSize: 13,
                            ),
                          ),
                        ),
                      ),
                    ),
                    hintStyle: TextStyle(
                      color: Color(0xffD2D2D2),
                      fontSize: 16,
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffEEEEEE)),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffEEEEEE)),
                    ),
                  ),
                ),
                TextField(
                  controller: state.verificationCodeTextController,
                  focusNode: state.verificationCodeFocusNode,
                  maxLines: 1,
                  style: TextStyle(
                    color: Color(0xff222222),
                    fontSize: 16,
                  ),
                  keyboardType: TextInputType.phone,
                  onChanged: (text) {
                    logic.whetherAvailableClick();
                  },
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(vertical: setWidth(40)),
                    hintText: '请输入验证码',
                    hintStyle: TextStyle(
                      color: Color(0xffD8D8D8),
                      fontSize: 16,
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffEEEEEE)),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffEEEEEE)),
                    ),
                  ),
                ),
                TextField(
                  controller: state.passwordTextController,
                  focusNode: state.passwordFocusNode,
                  maxLines: 1,
                  style: TextStyle(
                    color: Color(0xff222222),
                    fontSize: 16,
                  ),
                  // keyboardType: TextInputType.phone,
                  obscureText: state.newPassword,
                  onChanged: (text) {
                    logic.whetherAvailableClick();
                  },

                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(vertical: setWidth(40)),
                    hintText: '请输入新密码（最少8位，数字+字母）',
                    hintStyle: TextStyle(
                      color: Color(0xffd8d8d8),
                      fontSize: 16,
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffEEEEEE)),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffEEEEEE)),
                    ),
                    suffixIcon: IconButton(
                      onPressed: () {
                        setState(() {
                          state.newPassword = !state.newPassword;
                        });
                      },
                      icon: Icon(
                        //根据passwordVisible状态显示不同的图标
                        state.newPassword == true ? Icons.visibility : Icons.visibility_off,
                        color: Color(0xffcccccc),
                      ),
                    ),
                  ),
                ),
                TextField(
                  controller: state.enterAgainPasswordTextController,
                  focusNode: state.enterAgainPasswordFocusNode,
                  maxLines: 1,
                  style: TextStyle(
                    color: Color(0xff222222),
                    fontSize: 16,
                  ),
                  // keyboardType: TextInputType.phone,
                  obscureText: state.enterAgainPassword,
                  onChanged: (text) {
                    logic.whetherAvailableClick();
                  },
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(vertical: setWidth(40)),
                    hintText: '请再次输入新密码',
                    hintStyle: TextStyle(
                      color: Color(0xffd8d8d8),
                      fontSize: 16,
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffEEEEEE)),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffEEEEEE)),
                    ),
                    suffixIcon: IconButton(
                      onPressed: () {
                        setState(() {
                          state.enterAgainPassword = !state.enterAgainPassword;
                        });
                      },
                      icon: Icon(
                        //根据passwordVisible状态显示不同的图标
                        state.enterAgainPassword == true ? Icons.visibility : Icons.visibility_off,
                        color: Color(0xffcccccc),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: setWidth(50),
                ),
                InkWell(
                  onTap: () {
                    print('提交点击事件！！！');
                    logic.onSubmit();
                  },
                  child: Container(
                    width: MediaQuery.of(context).size.width - 40,
                    height: setWidth(90),
                    decoration: BoxDecoration(
                      color: !state.whetherAvailable ? Color(0x80EA5504) : Color(0xffEA5504),
                      borderRadius: BorderRadius.circular(setWidth(45)),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      '提交',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}